<template>
    <div class="maxWzp">
        <div class="bit">
            <el-button type="primary" size="mini" @click="remove">清除</el-button>

            <el-button type="primary" size="mini" @click="river">开启河流</el-button>
            <el-button type="primary" size="mini" @click="bus">轨迹边线</el-button>
            <el-button type="primary" title="耐心等待" size="mini" @click="moxing">合肥建模</el-button>
            <el-button type="primary" size="mini" @click="huagc">地铁站</el-button>
            <el-button type="primary" size="mini" @click="flyToFiveBuildByPoint(117.023666, 36.676720)">飞行</el-button>
            <el-button type="primary" size="mini" @click="addZero">打点</el-button>

            

            
        </div>
        <div id="mars3dContainer" class="mars3dContainer">

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            map: null,
            tileLayer:null,
            trainBusLayer: null, //轨迹
        }
    },
    mounted(){
        this.initMap()

        this.map.on(mars3d.EventType.wheel, (event) => {
            var cesiumViewer = this.map.getCameraView(); // 获取 Cesium Viewer
            console.log('当前相机高度：', cesiumViewer);
        })
        
    },

    methods:{

        //打点
        addZero(){
            // 创建DIV数据图层
            let graphicLayer = new mars3d.layer.GraphicLayer()
            this.map.addLayer(graphicLayer)

            const graphic = new mars3d.graphic.DivGraphic({
                position: [117.023666, 36.676720, 176.4],
                style: {
                html: `<div class="marsBlueGradientPnl">
                        <div></div>
                    </div>`,
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000), // 按视距距离显示
                    scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
                    clampToGround: true,

                    // 高亮时的样式
                    highlight: {
                        type: mars3d.EventType.click,
                        className: "marsBlueGradientPnl-highlight"
                    }
                },
                attr: { remark: "示例2" }
            })
            graphicLayer.addGraphic(graphic)
            graphic.testPoint = true 
            // 在layer上绑定监听事件
            graphicLayer.on(mars3d.EventType.click, function (event) {
                // event.stopPropagation()
                console.log("监听layer，单击了矢量对象", event)
            })
        },

        huagc(){
            let tiles3dLayer = new mars3d.layer.TilesetLayer({
                name: "轻轨地铁站",
                url: "//data.mars3d.cn/3dtiles/bim-ditiezhan/tileset.json",
                maximumScreenSpaceError: 16,
                position: { lng: 117.203994, lat: 31.857999, alt: 28.9 },
                rotation: { z: 168.1 },

                highlight: {
                type: "click",
                color: "#00FF00"
                },
                popup: "all",
                center: { lat: 31.856358, lng: 117.204451, alt: 148, heading: 350, pitch: -30 },
                flyTo: true,
                enableDebugWireframe: true // 是否可以进行三角网的切换显示
            })
            this.map.addLayer(tiles3dLayer)

            // 单击事件
            tiles3dLayer.on(mars3d.EventType.click, function (event) {
                console.log("单击了3dtiles图层", event)
            })
        },
        // 飞行
        flyToFiveBuildByPoint(lang, lat) {
            let orientation = {
                heading: Cesium.Math.toRadians(0), // 水平偏角，默认正北 0
                pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下
                roll: 0, // 旋转角
            }
            this.map.viewer.camera.flyTo({
                destination: new Cesium.Cartesian3.fromDegrees(lang, lat, 20000),
                orientation: orientation
            })
        },
        moxing(){
            this.flyToFiveBuildByPoint(117.226559,31.820867)
            let tiles3dLayer = new mars3d.layer.TilesetLayer({
                name: "合肥市建筑物",
                url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",
                maximumScreenSpaceError: 1,
                // marsJzwStyle: true, // 打开建筑物特效（内置Shader代码）
                marsJzwStyle: {
                baseHeight: 0.0, // 物体的基础高度，需要修改成一个合适的建筑基础高度
                heightRange: 280.0, // 高亮的范围  (baseHeight ~ baseHeight + heightRange)
                glowRange: 300.0 // 光环的移动范围
                },
                style: {
                color: {
                    conditions: [["true", "rgba(16, 119, 209, 1)"]]
                }
                },
                popup: [
                { field: "objectid", name: "编号" },
                { field: "name", name: "名称" },
                { field: "height", name: "楼高", unit: "米" }
                ],
                center: { lat: 31.813812, lng: 117.223505, alt: 1047.7, heading: 0, pitch: -39 },
                highlight: {
                type: mars3d.EventType.click, // 单击高亮
                outlineEffect: true, // 采用OutlineEffect方式来高亮
                color: "#FFFF00",
                width: 4
                },
                // flyTo: true,
                enableDebugWireframe: true // 是否可以进行三角网的切换显示
            })
            this.map.addLayer(tiles3dLayer)
        },
        // 轨迹
        bus(){
            this.trainBusLayer = new mars3d.layer.GeoJsonLayer({
                url: "/static/json/lixiaqujieline.json",
                allowDrillPick: false,
                symbol: {
                type: "polylineC",
                styleOptions: {
                    clampToGround: false,
                    width: 50, // 线宽
                    materialType: "PolylineGlow",
                    materialOptions: {
                    color: "#ffaa00",
                    opacity: 0.5,
                    glowPower: 0.06 // 发光强度
                    }
                }
                },
            })

            this.map.addLayer(this.trainBusLayer);
        },
        // 河流
        river(){
            let riverLayer = new mars3d.layer.GeoJsonLayer({
                url: "/static/json/river.json",
                allowDrillPick: false,
                symbol: {
                type: "waterC",
                styleOptions: {
                    normalMap: "/static/img/waterNormals.jpg",
                    frequency: 5000.0,
                    animationSpeed: 0.05,
                    amplitude: 9.0,
                    specularIntensity: 0.8,
                    baseWaterColor: "#00baff",
                    blendColor: "#00baff",
                    zIndex: 10,
                    show: true
                }
                }
            })
            this.map.addLayer(riverLayer);
        },
        initMap() {
            // 创建三维地球场景
            this.map = new mars3d.Map("mars3dContainer", {
                scene: {
                center: { lat: 36.676720, lng: 117.023666, alt: 10000, heading: 0, pitch: -90 },
                showSun: true,
                showMoon: true,
                showSkyBox: true,
                showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
                fog: true,
                fxaa: true,
                globe: {
                    showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
                    depthTestAgainstTerrain: false,
                    baseColor: "#546a53"
                },
                cameraController: {
                    zoomFactor: 3.0,
                    minimumZoomDistance: 1,
                    maximumZoomDistance: 50000000,
                    enableRotate: true,
                    enableZoom: true
                },
                mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
                mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
                },
                control: {
                baseLayerPicker: false, // basemaps底图切换按钮
                homeButton: false, // 视角复位按钮
                sceneModePicker: false, // 二三维切换按钮
                navigationHelpButton: false, // 帮助按钮
                fullscreenButton: false, // 全屏按钮
                contextmenu: { hasDefault: false } // 右键菜单
                }
            })

            // 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
            this.tileLayer = new mars3d.layer.TdtLayer({
                name: "天地图影像注记",
                key: mars3d.Token.tiandituArr,
                layer: "tdtVecLayer",
                style: 'default',
                format: 'image/jpeg',
                invertColor: true,
                filterColor: "#4e70a6",
                brightness: 0.6,
                contrast: 1.8,
                gamma: 0.3,
                hue: 1,
                saturation: 0
                
            })
            this.map.addLayer(this.tileLayer)
            

            this.bus()
            this.river()
            // return this.map
        },
        shub(){
            document.getElementById('mars3dContainer').addEventListener('wheel', (event) => {
                // 获取鼠标所在位置的屏幕坐标
                const screenPosition = new Cesium.Cartesian2(event.clientX, event.clientY);

                // 获取鼠标所在位置的世界坐标
                const worldPosition = this.map.scene.pickPosition(screenPosition);

                if (Cesium.defined(worldPosition)) {
                    // 获取高度信息
                    const height = worldPosition.height;
                    console.log('当前位置高度：', height);
                }
            })
        },
        // 清除
        remove(){
            this.trainBusLayer.clear() // 清除图层数据 需要清除的图层 需在上面定义 不可使用let 定义
        },
        generateModelMatrix (position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1]){
            const rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotation[0])))
            const rotationY = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotation[1])))
            const rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotation[2])))
            if (!(position instanceof Cesium.Cartesian3)) {
                position = Cesium.Cartesian3.fromDegrees(...position)
            }
            const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position)
            Cesium.Matrix4.multiply(enuMatrix, rotationX, enuMatrix)
            Cesium.Matrix4.multiply(enuMatrix, rotationY, enuMatrix)
            Cesium.Matrix4.multiply(enuMatrix, rotationZ, enuMatrix)
            const scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(...scale))
            const modelMatrix = Cesium.Matrix4.multiply(enuMatrix, scaleMatrix, new Cesium.Matrix4())

            return modelMatrix
        },


        

        






    }
}
</script>

<style scoped>
    >>> .mars3d-divGraphic {
        width: 50px;
        margin-top: -780px !important;
    }
    >>> .marsBlueGradientPnl{
        width: 50px;
        height: 35px;
        background:url(/static/img/dw.png) !important;
        background-size: 100% 100% !important;
    }
    .maxWzp{
        width: 99%;height: 98%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    
    .bit{
        width: 130px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mars3dContainer{
        width: calc(100% - 150px);
        height: 100%;
    }
    

    >>> .el-button{
        margin: 0px;
        margin-top: 15px;
    }
</style>